<template>
	<view>
		<uNavbar title="我的拼手机" bgColor="#E0DDDA" ></uNavbar>
		<view class="tab-nav">
			<view class="tab-nav-item"  :class="{ active: ids==item.category_id}" v-for="(item,index) in sellist" :key="index" @click="clickToggleHandle(item)">
				{{item.category_name}}
			</view>
		</view>
		<view class="main">
			<view class="wrap">
				<view class="wrapitem"  v-for="item in selllist" :key="item.id" @click="detail(item)">
					
					<view class="imgwrap" >
						<image   :style="item.assembled? 'opacity:1':'opacity:0.7' "  v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image  :style="item.assembled? 'opacity:1':'opacity:0.7' " v-if="item.level==2"  class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image  :style="item.assembled? 'opacity:1':'opacity:0.7' " v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image  :style="item.assembled? 'opacity:1':'opacity:0.7' " class="image"  :src="item.cover" mode=""></image>
						<view class="tip" v-if="!item.assembled"  @click.stop="gopay">
							去购买
						</view>
					</view>
					
					<text  class="text1" >{{item.name}}</text>
					
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="show=false" bgColor="transparent">
			<view class="wrap2">
				<view class="wrapitem2">
					<view class="imgwrap2">
						<image class="logo2" :src="items.logo" mode=""></image>
						<image v-if="items.level==3" class="bg2" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="items.level==2" class="bg2" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="items.level==1" class="bg2" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image2" :src="items.cover" mode=""></image>
					</view>
					<text  class="text1" >{{items.name}}</text>
					<view class="price2">
						零售价：{{items.price}}
					</view>
					<view class="btn2" @click="show=false">
						确定
					</view>
				</view>
			</view>
		
		</u-popup>
		<view class="empty2">
			
		</view>
	</view>
</template>

<script>
	import {phonedetail,phoneindex,phonenav} from "../../api/myphone.js"
	export default {
		data() {
			return {
				sellist:[
					// {
					// 	name:"动力系统",
					// 	select:true
					// },{
					// 	name:"底盘系统",
					// 	select:false
					// },
					// {
					// 	name:"车身系统",
					// 	select:false
					// },{
					// 	name:"电器系统",
					// 	select:false
					// }
				],
				ids:1,
				id:"",
				list:[],
				page:1,
				sizi:30,
				selllist:[],
				show:false,
				items:{}
				
			}
		},
		onShow() {
			this.page=1
			this.getid()
		},
		onLoad(options) {
			// this.getinfo()
			this.ids=options.id
			// console.log(this.ids)
			// this.getid()
			
		},
		methods: {
			detail(item){
				this.items=item
				this.show=true
			},
			gopay(){
				uni.navigateTo({
					url:"/pagesMy/nationalPhonePooling/tradingMarketDetail"
				})
			},
			getid() {
				phoneindex().then(res => {
					this.id = res.data.member_phone.phone_id
					this.getinfo()
					console.log(this.id, "asdasd")
				})
			},
			getinfo(){
				phonenav({
					phone_id:this.id
				}).then(res=>{
					// this.ids=res.data[0].category_id
					this.sellist=res.data
					this.getdetail()
				})
			},
			getdetail(){
				phonedetail({
					page:this.page,
					category_id:this.ids,
					phone_id:this.id
				}).then(res=>{
					// this.list=res.data.data
					if (res.code == 1) {
						let list = res.data.data;
						this.selllist = this.page == 1 ? list : this.selllist.concat(list);
						console.log(this.selllist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res,"asadasd")
				})
			},
			clickToggleHandle(ele) {
				this.ids=ele.category_id
				this.page=1
				this.getdetail()
				// ele.select = true
			
			},
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getdetail()
			}
		},
	}
</script>
<style>
	
</style>
<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
/deep/ .u-navbar__content__title{
	color: #333 !important;
}
/deep/.uicon-arrow-left{
	color: #333 !important;
}
.tab-nav{
	width: 690rpx;
	height: 64rpx;
	
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.tab-nav-item{
		width: 25%;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-weight: 400;
		font-size: 32rpx;
		color:#666;
	}
}
.active {
		position: relative;
		font-weight: 700;
		color: #333333 !important;
	}

	.active::before {
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 62rpx;
		height: 6rpx;
		background: #A68A64;
	}
.main{
	width: 690rpx;
	// min-height: 502rpx;
	background:#F2F2F2;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	padding-bottom: 40rpx;
	.tit{
		width: 690rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		padding-top: 30rpx;
		position: relative;
		>text{
			position: absolute;
			right: 20rpx;
			top: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255,255,255,0.8);
		}
	}
	.wrap{
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		.wrapitem{
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			 margin-right: 12rpx;
			 margin-top: 20rpx;
			 position: relative;
			 .imgwrap{
				 width: 128rpx;
				 height: 128rpx;
				 position: relative;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 .bg{
				 	 width: 128rpx;
				 	 height: 128rpx;
				 	 position: absolute;
					 top: 0rpx;
				  }
				 .image{
				 	transform: translate();
				 	width: 100rpx;
				 	height: 100rpx;
				 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				 }
				 .tip{
					 position: absolute;
					 width: 108rpx;
					 height: 38rpx;
					background: #A68A64;
					 border-radius: 6rpx 6rpx 6rpx 6rpx;
					 font-weight: 400;
					 font-size: 26rpx;
					 color: #FFFFFF;
					 text-align: center;
					 opacity: 1 !important;
				 }
			 }
			
			.text1{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #333;
			}
			.text2{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}
			.text3{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}
	
		
	}
}
	.wrap2 {
		width: 656rpx;
		height: 520rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;

		.wrapitem2 {
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;

			.num2 {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				z-index: 99;
				width: 40rpx;
				height: 30rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: 0.7;
				font-weight: 500;
				font-size: 26rpx;
				color:#333333;
				text-align: center;
				line-height: 30rpx;
			}

			.btn2 {
				width: 588rpx;
				height: 80rpx;
				background: #A68A64;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			.price2 {
				width: 656rpx;
				text-align: center;
				font-weight: 400;
				font-size: 40rpx;
				color:#333333;
				font-family: iconfont2;
				margin-top: 24rpx;
			}

			.imgwrap2 {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo2 {
					
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top:4rpx;
					left: 20rpx;
					border-top-left-radius: 8rpx;
				}

				.bg2 {
					width: 158rpx;
					height: 158rpx;
					position: absolute;
					top: 0rpx;
				}

				.image2 {
					transform: translate();
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}

			.text11 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #5C430B;
			}

			.text12 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}

			.text13 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}


	}
</style>